html {
  font-size: 14px;
}
html,
body,
p {
  margin: 0;
}
:root {
  // header组件的颜色
  --hc-header-text-color: white;
  --hc-header-text-primary-color: #a5eae6;
  --hc-header-height: 5rem /* 70/14 */;
  // nav组件的颜色
  --hc-nav-background-color: #4e5c5d;
  --hc-nav-choosed-background-color: #262f2f;
  --hc-nav-border-color-right: #242424;
  --hc-nav-border-color-bottom: #3c4748;
  --hc-nav-text-color: #f2f2f2;
  --hc-nav-choosed-text-color: #81d8d1;
  --hc-nav-width: 8.571429rem /* 120/14 */;

  // content部分的组件
  --hc-content-background-color: #374246;
  --hc-content-border-color: #0b0b0b;
  --hc-content-padding: 1.142857rem /* 16/14 */;
  --hc-page-background-color: #262f2f;
  --hc-page-padding-vertical: 2.142857rem /* 30/14 */;
  --hc-page-padding-horizontal: 1.142857rem /* 16/14 */;
}

@mixin pageHeight($padding: 1.428571rem /* 20/14 */) {
  height: calc(100vh - var(--hc-header-height) - var(--hc-content-padding) * 2 - var(--hc-page-padding-vertical) * 2 - $padding);
}
